<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_全局组件和局部组件</title>
</head>

<body>
<div id="app">
    <self_zujian></self_zujian>
    <cpn1></cpn1>
</div>

<div id="app2">
    <self_zujian></self_zujian>
    app2
    <!-- 因为 cpn1 没有注册到 app2 的 vue component 里，所以无法解析 -->
    <cpn1></cpn1>
</div>
</body>
<script src="../vue.js"></script>
<script>
    // 1. 创建组件对象
    const cpn1 = Vue.extend({
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容段落...</p>
            </div>
        `
    })

    // 2. 注册组件(这种创建组件的方式是全局创建，不需要去vue实例里注册，即意味着可以供多个Vue实例来使用)；那怎么样才能创建局部组件呢？
    Vue.component('self_zujian', cpn1)

    const app = new Vue({
        el: '#app',
        components: {
            //cpn1: cpn1 //es6里当属性名和属性值相等时,可以省略一个直接写一个即可
            cpn1 //局部组件
        }
    })

    const app2 = new Vue({
        el: '#app2',
        // 将 components 注释掉后，app2 下面的 cpn1 组件就不会显示
        /*components: {
            cpn1
        }*/
    })
</script>

</html>
